//
// "Background grid image" module for the Zen Grids system.
//


@import "./functions";
// Add the default set of background images.
@import "./internal/variables-background";
// Unlike the rest of Zen Grids, this module requires Compass.
@import "compass/css3/images";


//
// Add a background grid image to an element's background.
// @see http://next.zengrids.com/reference/background/#zen-grid-background
//
@mixin zen-grid-background(
  $columns              : $zen-columns,
  $gutters              : $zen-gutters,
  $gutter-method        : $zen-gutter-method,
  $grid-width           : $zen-grid-width,
  $grid-color           : $zen-grid-color,
  $grid-numbers         : $zen-grid-numbers,
  $direction            : $zen-direction,
  $switch-direction     : $zen-switch-direction
) {

  // Check if the global variable is turning off background images.
  @if $display-zen-grid-background {

    $bg-images            : ();
    $gradient             : ();
    $left-half-gradient   : ();
    $right-half-gradient  : ();

    // Calculate half of the unit width.
    $unit-width           : zen-unit-width($columns, $gutters, $gutter-method, $grid-width);
    $half-unit-width      : $unit-width / 2;

    // Determine the float direction.
    $dir                  : $direction;
    @if $switch-direction {
      $dir                : zen-direction-switch($dir);
    }

    @for $count from 1 through $columns {
      // First add the grid numbers to the background images list.
      $position: (2 * $count - 1) * $half-unit-width;
      @if $gutter-method == margin {
        $position: $position + ($count - 1) * $gutters;
      }
      $reverse-count: $columns + 1 - $count;

      @if $dir == left {
        @if $grid-numbers == both or $grid-numbers == top {
          $bg-images  : append($bg-images, nth($zen-grid-number-images, $count) $position top no-repeat, comma);
        }
        @if $grid-numbers == both or $grid-numbers == bottom {
          $bg-images  : append($bg-images, nth($zen-grid-number-images, $reverse-count) $position bottom no-repeat, comma);
        }
      }
      @else {
        @if $grid-numbers == both or $grid-numbers == bottom {
          $bg-images  : append($bg-images, nth($zen-grid-number-images, $count) $position bottom no-repeat, comma);
        }
        @if $grid-numbers == both or $grid-numbers == top {
          $bg-images  : append($bg-images, nth($zen-grid-number-images, $reverse-count) $position top no-repeat, comma);
        }
      }

      // Next, build the color stops for the column gradients.
      @if $gutter-method == margin {
        // If the gutter method is "margin", calculating the color stops is easy.
        @if $count < $columns {
          $stop: $count * $unit-width + ($count - 1) * $gutters;
          $gradient: append($gradient, $grid-color $stop, comma);
          $gradient: append($gradient, transparent $stop, comma);

          $stop: $stop + $gutters;
          $gradient: append($gradient, transparent $stop, comma);
          $gradient: append($gradient, $grid-color $stop, comma);
        }
      }
      @else if comparable($gutters, $grid-width) {
        // If the gutter and grid width have the same units, calculating the color
        // stops is easy.
        $stop: ($count - 1) * $unit-width + zen-half-gutter($gutters);
        $gradient: append($gradient, transparent $stop, comma);
        $gradient: append($gradient, $grid-color $stop, comma);

        $stop: $count * $unit-width - zen-half-gutter($gutters);
        $gradient: append($gradient, $grid-color $stop, comma);
        $gradient: append($gradient, transparent $stop, comma);
      }
      @else {
        // If the gutter and grid width have different units, things are tricky.
        // The CSS3 Gradient syntax doesn't allow for calc() to be used in color
        // stops, so we can't express the columns as 20% + 10px. Instead we are
        // going to divide all our columns in half and into 2 groups: one group
        // for the left halves of the columns and one group for the right halves.
        // Then we'll use background position to shift the left halves over to the
        // right by a half gutter width and shift the right halves over to the
        // left by a half gutter width and just let the two sets of gradients
        // overlap in the middle. Easy.

        // Build the color stops for the left halves of the column gradients.
        @if $count > 1 {
          $stop: (2 * $count - 2) * $half-unit-width;
          $left-half-gradient: append($left-half-gradient, transparent $stop, comma);
          $left-half-gradient: append($left-half-gradient, $grid-color $stop, comma);
        }

        $stop: (2 * $count - 1) * $half-unit-width;
        $left-half-gradient: append($left-half-gradient, $grid-color $stop, comma);
        $left-half-gradient: append($left-half-gradient, transparent $stop, comma);

        // Build the color stops for the right halves of the column gradients.
        $right-half-gradient: append($right-half-gradient, transparent $stop, comma);
        $right-half-gradient: append($right-half-gradient, $grid-color $stop, comma);

        @if $count < $columns {
          $stop: (2 * $count) * $half-unit-width;
          $right-half-gradient: append($right-half-gradient, $grid-color $stop, comma);
          $right-half-gradient: append($right-half-gradient, transparent $stop, comma);
        }
      }
    }

    // Last, add the gradient (or gradient halves) to the background images list.
    @if $gutter-method == margin or comparable($gutters, $grid-width) {
      $bg-images  : append($bg-images, linear-gradient(left, $gradient) left top no-repeat, comma);
    }
    @else {
      $bg-images  : append($bg-images, linear-gradient(left, $left-half-gradient) zen-half-gutter($gutters) top no-repeat, comma);
      $bg-images  : append($bg-images, linear-gradient(left, $right-half-gradient) (-(zen-half-gutter($gutters))) top no-repeat, comma);
    }

    // Apply the full list of background images.
    @include background($bg-images);
  }
}
